<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模拟登录</title>
</head>

<body>
  <form action="user/login" method="post">
    <input type="text" id="username" name="username" placeholder="username" />
    <input type="password" id="password" name="password" placeholder="password" />
    <input type="submit" id="submitBtn" value="login">
  </form>
  <p id="loginHint"></p>

  <script>
    function User(username, password) {
      this.username = username
      this.password = password
    }
    //模拟用户数据
    const user1 = new User('admin1', '123')
    const user2 = new User('admin2', '456')
    const user3 = new User('admin3', '789')
    const users = [user1, user2, user3]

    submitBtn.onclick = function () {
      //阻止submit按钮默认提交行为
      event.preventDefault()

      //判断登录信息
      let inputUsername = username.value
      let inputPassword = password.value
      let result = users.some(user => user.username == inputUsername && user.password == inputPassword)
      if (result) {
        //说明登录成功
        //location.href = 'success.html'
        //提交表单
        document.forms[0].submit()
      } else {
        //说明登录失败
        //location.href = 'error.html'
        loginHint.innerHTML = '您输入的用户名或者密码有误!'
        setTimeout(function () {
          username.value = ''
          password.value = ''
          loginHint.innerHTML = ''
          username.focus()
        }, 2000)
        //return false
      }
    }
  </script>
</body>

</html>